<template>
  <div>
    <p v-if='isReadOnlyPage === true'>{{ values }}</p>
    <a-date-picker v-else @change="onChange" v-model="reverseDate" style='width:100%' :allowClear='false' :disabled="isDisabled" :getPopupContainer="node => node.parentNode" />
  </div>
</template>
<script>
import moment from 'moment'
export default {
  name: 'Date',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'isReadOnlyPage', 'isDisabled'],
  watch: {
    value: {
      handler (newVal) {
        if (newVal) {
          this.reverseDate = moment(newVal)
        } else {
          this.reverseDate = null
        }
      },
      immediate: true
    }
  },
  computed: {
    strValue () {
      return this.value && this.value.toString()
    },
    values () {
      if (this.value) {
        return moment(this.value).format('YYYY-MM-DD')
      } else {
        return null
      }
    }
  },
  data () {
    return {
      moment,
      dateFormat: 'YYYY-MM-DD',
      reverseDate: null
    }
  },
  filters: {
    dateFilter (val) {
      if (val) {
        return val.substring(0, val.indexOf('T'))
      } else {
        return null
      }
    },
    dateFilterEmpty (val) {
      if (val) {
        return val && val.substring(0, val.indexOf(' '))
      } else {
        return null
      }
    }
  },
  methods: {
    onChange (date, dateString) {
      console.log(date, dateString)
      this.$emit('change', date, dateString)
      this.$emit('onBlurFn', true)
    }
  }
}
</script>
<style lang="stylus" scoped>
</style>
